<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${question.title}"></title>
    <head th:insert="~{import :: head}"></head>
    <head th:insert="~{import :: markdown}"></head>
    <!--时间戳-日期转化js-->
    <script src="/js/moment.js"></script>

</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="container-fluid main">
    <div class="row">
        <div class="col-md-9 col-md-12 col-sm-12 col-xs-12">
            <!-- 问题详情区域 -->
            <div class="col-md-12 col-md-12 col-sm-12 col-xs-12 comment-margin-top">
                <h4 class="media-heading " th:text="${question.title}"></h4>
                <div class="question-info">
                    作者：<span th:text="${question.user.name}"></span> |
                    发布时间：<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd  HH:mm')}"></span> |
                    阅读数：<span th:text="${question.viewCount}"></span>
                    <!--所有标签-->
                    <div th:class="question-tag-area">
                        <span th:each="tag : ${question.tag.split(',|，')}" class="label label-primary question-tag"
                              th:text="${tag}"></span>
                    </div>
                    <!--编辑按钮-->
                    <a th:if="${session.user.name.equals(question.user.name)}" th:href="@{'/publish/'+${question.getId()}}" class="question-modify-icon pull-right">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑
                    </a>
                </div>
                <hr class="question-modify-hr"/>
                <div id="question-markdown-view">
                    <textarea style="display:none;" th:text="${question.description}"></textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        var testView = editormd.markdownToHTML("question-markdown-view", {});
                    });
                </script>
                <hr/>
            </div>

            <!-- 问题回复列表区域 -->
            <div class="col-md-12 col-md-12 col-sm-12 col-xs-12 comment-margin-top ">
                <div>
                    <h3>
                        <span th:text="${question.getCommentCount()}"></span>个回复
                    </h3>
                    <hr/>
                </div>
                <div class="media comment-list" th:each="comment : ${comments}">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded" th:src="${comment.user.avatarUrl}" alt="jpg">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${comment.user.name}"></span>
                            <span class="text-desc" th:text="${comment.user.bio}"></span>
                        </h5>
                        <div th:id="'questionComment-markdown-view'+${comment.id}">
                            <textarea style="display:none;" th:text="${comment.content}"></textarea>
                        </div>
                        <script type="text/javascript" th:inline="javascript">
                            $(function () {
                                var testView = editormd.markdownToHTML("questionComment-markdown-view" + [[${comment.id}]], {});
                            });
                        </script>
                        <div>
                            <span class="glyphicon glyphicon-thumbs-up comment-icon"></span>
                            <span class="glyphicon glyphicon-comment comment-icon"
                                  th:onclick="'getSecondLevelComment('+${comment.id}+')'"
                                  th:text="${comment.commentCount}"></span>
                            <span class="pull-right comment-time" th:text="${comment.pubtime}"></span>
                        </div>
                        <!-- 二级回复区域 -->
                        <div class="col-md-12 col-md-12 col-sm-12 col-xs-12 collapse comment-second-level"
                             th:id="'comment_'+${comment.id}">
                            <!--                            <div class="media" th:each="comment : ${comments}">-->
                            <!--                                <div class="media-left">-->
                            <!--                                    <a href="#">-->
                            <!--                                        <img class="media-object img-rounded" th:src="${comment.user.avatarUrl}" alt="jpg">-->
                            <!--                                    </a>-->
                            <!--                                </div>-->
                            <!--                                <div class="media-body">-->
                            <!--                                    <h5 class="media-heading">-->
                            <!--                                        <span th:text="${comment.user.name}"></span>-->
                            <!--                                        <span class="text-desc" th:text="${comment.user.bio}"></span>-->
                            <!--                                    </h5>-->
                            <!--                                    <p th:text="${comment.content}"></p>-->
                            <!--                                    <span class="pull-right comment-time" th:text="${comment.pubtime}"></span>-->
                            <!--                                </div>-->
                            <!--                                <hr/>-->
                            <!--                            </div>-->
                            <div class="col-md-12 col-md-12 col-sm-12 col-xs-12">
                                <input type="text" th:id="'second_level_comment_'+${comment.id}+'_content'"
                                       class="form-control" placeholder="评论一下..." autocomplete="off">
                                <button type="button" class="btn btn-success pull-right comment-second-level-btn"
                                        th:onclick="'addComment('+${comment.id}+',2)'">评论
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr th:unless="${comment.equals(comments.get(comments.size()-1))}"/>
                </div>
            </div>

            <!-- 用户回复区域 -->
            <div id="comment_area" class="col-md-12 col-md-12 col-sm-12 col-xs-12 comment-margin-top">
                <!--用户信息-->
                <div class="media comment-curr-user">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded" th:src="${session.user!=null?session.user.avatarUrl:'/images/avatar-default.png'}">
                        </a>
                    </div>
                    <div class="media-body" style="padding-top: 12px">
                        <h5 class="media-heading">
                            <span th:text="${session.user!=null?session.user.name:'匿名用户'}"></span>
                        </h5>
                    </div>
                </div>
                <div id="questionComment-editor">
                    <!--回复文本框-->
                    <textarea id="question_comment_content" class="form-control comment-textarea" rows="6"
                              style="display:none;" placeholder="填写你要回复的内容..."></textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        var editor = editormd("questionComment-editor", {
                            width: "100%",
                            height: 350,
                            path: "/lib/",//editor.md插件的lib目录地址
                            delay: 0,// 演示
                            watch: false,//是否开启预览功能
                            placeholder: "请输入问题描述",
                            autoFocus: false,// 启用/禁用自动聚焦编辑器左输入区域
                            saveHTMLToTextarea: false, // 保存 HTML 到 Textarea
                            toolbarAutoFixed: true,      //在窗口滚动自动定位
                            /*----上传图片相关----*/
                            imageUpload: true,
                            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                            imageUploadURL: "/file/upload",
                        });
                    });
                </script>

                <!--回复按钮-->
                <button type="button" class="btn btn-success comment-btn"
                        th:onclick="'addComment('+${question.id}+',1)'">回复
                </button>
            </div>

        </div>
        <div class="col-md-3 col-md-12 col-sm-12 col-xs-12">
            <!-- 问题发起指南 -->
            <div class="aw-mod publish-help community-margin-top">
                <div class="mod-head">
                    <h4>发起人</h4>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded" th:src="${question.user.avatarUrl}">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <span th:text="${question.user.name}"></span>
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="advertising">
                    <img src="/images/WeChat.jpg" alt="WeChat.jpg" class="img-thumbnail advertising-img">
                </div>
                <div class="mod-head">
                    <h4>相关问题</h4>
                    <ul>
                        <li th:each="relatedQuestion : ${relatedQuestions}" class="related-link">
                            <a th:href="@{'/question/?id='+${relatedQuestion.id}}"
                               th:text="${relatedQuestion.title}"></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- end 问题发起指南 -->
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
</body>
</html>